<template>
  <div>
    <h2 class="title">登录界面</h2>
    <!-- 
        el-form
            model	         表单数据对象	object
            status-icon    是否在输入框中显示校验结果反馈图标	boolean
            rules	         表单验证规则	object
            ref="ruleForm" 获取DOM元素
            label-width="100px" 文本宽度
            方法：
              validate()	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

              resetFields()	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

          el-form-item 
            表单的每一项内容 
              label="账号"      标题标签文本
              prop="username"  表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
     -->
    <div class="box">
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//1. 安装 jwt-decode  2. 导入
import jwt from 'jwt-decode'
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        //表单数据对象	object
        username: "",
        password: "",
      },
      rules: {
        // 表单验证规则	object
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    //提交表单事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("校验成功", this.loginForm);
          //请求登录接口---token -- 
          this.$api.getLogin({
            user:this.loginForm.username,
            pwd:this.loginForm.password
          })
          .then(res=>{
            console.log(res.data);
            console.log(jwt(res.data.token));
            //存储数据给vuex实现组件共享数据资源
            let obj={
              token:res.data.token,
              username:jwt(res.data.token).user
            }
            this.$store.commit('LoginModule/setUser',obj)
            //数据持久化
            localStorage.setItem('userinfo',JSON.stringify(obj))
            //跳转到首页
            this.$router.push('/')
          })

        } else {
          console.log("校验失败");
          return false;
        }
      });
    },
    //重置表单事件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang='less' scoped>
.title {
  text-align: center;
  margin-top: 50px;
}
.box {
  width: 400px;
  height: 200px;
  box-shadow: 0 0 5px 5px rgba(134, 134, 134, 0.1);
  margin: 20px auto;
  padding: 30px;
}
</style>